<template>
  <page-layout :title="headContent.name"
               :logo="logo"
               :show-breadcrumb="false">
    <yq-page-head-content ref="pageContent" slot="headerContent" :head-content="headContent" :head-content-columns="headContentColumns"/>
    <yq-page-head-extra ref="pageExtra" slot="extra" :head-content="headContent" :head-extra-columns="headExtraColumns"/>
    <a-divider style="margin: 1px"/>
    <a-divider style="margin: 1px"/>
    <!-- actions -->
    <template slot="action">
      <a-button-group style="margin-right: 4px;">
        <a-button @click="handleEdit(headContent)">编辑</a-button>
        <a-button>
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link">
              <a-icon type="ellipsis"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(headContent.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-button>
      </a-button-group>
      <template>
        <a-button type="primary" @click="">变更负责人</a-button>
      </template>
      <mdm-customer-contacts-modal ref="modalForm" @ok="modalFormOk"></mdm-customer-contacts-modal>
    </template>
    <a-tabs type="card"  @change="callback">
      <a-tab-pane key="1" tab="详细资料">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <detail-list title="┃ 基本信息" size="small" class="tab-detail-layout" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="姓名">{{headContent.name}}</detail-list-item>
            <detail-list-item term="客户名称">{{headContent.customerId_dictText}}</detail-list-item>
            <detail-list-item term="手机">{{headContent.mobile}}</detail-list-item>
            <detail-list-item term="地址">{{headContent.homeAddress}}</detail-list-item>
            <detail-list-item term="性别">{{headContent.sex_dictText}}</detail-list-item>
            <detail-list-item term="属性">{{headContent.prop_dictText}}</detail-list-item>
            <detail-list-item term="部门">{{headContent.dept}}</detail-list-item>
            <detail-list-item term="职务">{{headContent.post}}</detail-list-item>
            <detail-list-item term="备注">{{headContent.remark}}</detail-list-item>
          </detail-list>

          <detail-list title="┃ 其它信息" size="small" class="tab-detail-layout" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="民族">{{headContent.nation_dictText}}</detail-list-item>
            <detail-list-item term="年龄段">{{headContent.ageGroup_dictText}}</detail-list-item>
            <detail-list-item term="微信">{{headContent.wechat}}</detail-list-item>
            <detail-list-item term="QQ">{{headContent.qq}}</detail-list-item>
            <detail-list-item term="电话">{{headContent.telephone}}</detail-list-item>
            <detail-list-item term="邮箱">{{headContent.email}}</detail-list-item>
            <detail-list-item term="兴趣爱好">{{headContent.hobby}}</detail-list-item>
            <detail-list-item term="性格特征">{{headContent.trait}}</detail-list-item>
            <detail-list-item term="忌讳事项">{{headContent.taboo}}</detail-list-item>
          </detail-list>
          <detail-list title="┃ 系统信息" size="small" class="tab-detail-layout" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="创建人">{{headContent.createBy}}</detail-list-item>
            <detail-list-item term="创建部门">{{headContent.sysOrgCode_dictText}}</detail-list-item>
            <detail-list-item term="创建时间">{{headContent.createTime}}</detail-list-item>
            <detail-list-item term="更新人">{{headContent.updateBy}}</detail-list-item>
            <detail-list-item term="更新时间">{{headContent.updateTime}}</detail-list-item>
          </detail-list>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </page-layout>
</template>

<script>
  import {mixinDevice} from '@/utils/mixin.js'
  import PageLayout from '@/components/page/PageLayout'
  import DetailList from '@/components/tools/DetailList'
  import {deleteAction, getAction, getServiceList, httpAction, putAction} from "@/api/manage";
  import STable from '@/components/table/'
  import MdmCustomerContactsModal from './MdmCustomerContactsModal'

  const DetailListItem = DetailList.Item

  export default {
    name: "MdmCustomerContactsDetail",
    components: {
      PageLayout,
      DetailList,
      DetailListItem,
      STable,
      MdmCustomerContactsModal,
    },
    mixins: [mixinDevice],
    data() {
      return {
        headContent: {},
        defaultActiveKey: '1',
        headContentColumns: [
          {
            title: '客户',
            dataIndex: 'customerId_dictText',
            len: 7,
          },
          {
            title: '手机',
            dataIndex: 'mobile',
          },
          {
            title: '职务',
            dataIndex: 'post',
          },
        ],
        headExtraColumns: [
          {
            title: '联系人属性',
            dataIndex: 'prop_dictText',
          },
        ],
        url: {
          list: "/mdm/customerContacts/list",
          edit: "/mdm/customerContacts/edit",
          delete: "/mdm/customerContacts/delete",
        },
        logo: require('@/views/mdm/assets/联系人图标.png'),
      }
    },
    methods: {
      edit(record) {
        this.headContent = record;
      },
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleDelete: function (id) {
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, {id: id}).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.$emit('del');
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      callback(key){
      },
      modalFormOk: function () {
        // 刷新详情页
        this.detailFresh();
        //刷新列表
        this.$emit('freshList');
      },
      detailFresh(){
        let that = this;
          getAction(that.url.list,{id : that.headContent.id}).then((res)=>{
            if(res.success){
              let record = (res.result.records)[0];
              if(record){
                that.headContent = record;
              }
            }else{
              that.$message.warning(res.message);
            }
          })
      },
    },
  }
</script>

<style lang="less" scoped>

  .detail-layout {
    margin-left: 2px;
  }

  .text {
    color: rgba(0, 0, 0, .45);
    text-align: center;
  }

  .contentText {
    color: rgba(0, 0, 0, .45);
    font-size: 13px;
  }

  .heading {
    color: rgba(0, 0, 0, .85);
    font-size: 20px;
    text-align: center;
  }

  .contentHeading {
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
  }

  .no-data {
    color: rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;

    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }

  .mobile {
    .detail-layout {
      margin-left: unset;
    }

    .text {

    }

    .status-list {
      text-align: left;
    }

    .term {
      color: rgba(0,0,0,.85);
      display: table-cell;
      line-height: 20px;
      margin-right: 8px;
      padding-bottom: 16px;
      white-space: nowrap;

      &:after {
        content: ":";
        margin: 0 8px 0 2px;
        position: relative;
        top: -.5px;
      }
    }

    .content {
      color: rgba(0,0,0,.65);
      display: table-cell;
      line-height: 22px;
      padding-bottom: 16px;
      width: 100%;
    }

  }
</style>